<template>
	<view class="container">
		<carHeader :title="'输入核销码'"></carHeader>
		<view class="top">
			<view class="input1">
				输入核销码：
			</view>
			<view style="display: flex; justify-content: space-between; ">
				<input class="input" v-model="code"></input>
				<button class="button" @click="getCode()">识别</button>
			</view>
		</view>

		<view v-if="verification != null">
			<view class="bottom">
				<view class="bottom1">
					<text>核销码 {{verification.verCode}}</text>
				</view>

				<view class="bottom2">
					<text class="title">服务内容</text>
					<text class="zw" style="margin-bottom: 16rpx;">{{verification.merchantName}} 标准洗车服务包含</text>
					<view v-for="item in serviceContent">
						<text class="zw">{{item}}</text>
					</view>

				</view>

				<view>

					<view class="bottom3">
						<text class="title">订单信息</text>
						<view v-if="verification.prePrice != null && verification.payPrice != null">
							<text class="zw">订单金额：<text>￥ {{verification.prePrice}}</text></text>
							<text class="zws">实付金额：<text>￥ {{verification.payPrice.toFixed(2)}}</text></text>
							<text class="zw">优惠金额：<text>￥ {{(verification.prePrice - verification.payPrice).toFixed(2)}}</text></text>
							<text class="zw">订单编号：<text>{{verification.orderDetailsId}}</text></text>
							<text class="zw">支付时间：<text>{{verification.createTime}}</text></text>
							<text class="zw">预约时间：<text>{{verification.orderTime}}</text></text>
						</view>
					</view>



					<view style="position: absolute;margin-top: 150rpx;">
						<!-- <button class="status" @click="openPopup">{{ buttonText }}</button> -->
						<button class="status" @click="openPopup"
							v-if="verification.verificationStatus == 0">确认核销</button>
						<button class="status2" v-else>已核销</button>
						<uni-popup ref="popup" type="dialog">
							<view class="custom-dialog">
								<text>核销此订单</text>
								<text>请您仔细核对订单,此操作不可撤销,请谨慎选择！</text>
								<view class="button-confirm">
									<button @click="closePopup" class="button-confirm1">取消</button>
									<button @click="confirm" class="button-confirm2">确认</button>
								</view>
							</view>

						</uni-popup>
					</view>
				</view>

			</view>


		</view>
		<view v-else class="null">
			<view class="bottom1">
				<!-- <text>核销码 {{c}}</text> -->
				暂无数据
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				//核销码详细信息 
				verification: {},
				coupon: {}, //优惠券对象
				serviceContent: [], //服务内容list
				// buttonText: '确认核销'
				code: '', //用于获取上个页面传递的核销码,输入框绑定的核销码
				c: '', //核销码信息为空的时候显示的核销码
				token: '', //token
				seller: '', //商户id
			};
		},
		methods: {
			openPopup() {
				this.$refs.popup.open();
			},
			closePopup() {
				this.$refs.popup.close();

			},
			confirm() {
				let that = this;
				//修改核销状态
				uni.request({
					url: "http://localhost:8080/carShop/shopVerificationDetails/updateStatus?id=" + this
						.verification.orderDetailsId,
					header: {
						'token': that.token
					},
					success: (response) => {
						this.getCode(this.code)
					}
				})


				// 关闭对话框  
				this.closePopup();
				// TODO: 在这里添加其他核销后的逻辑  
			},
			//识别核销码
			getCode() {
				// this.code = this.verification.verCode
				this.c = this.code;
				this.getDetails(this.c);


			},
			//查询核销码相关信息
			getDetails(vercode) {
				let that = this

				//根据核销码和商家id查询核销码对应信息
				uni.request({
					url: "http://localhost:8080/carShop/shopVerificationDetails/getCode",
					data: {
						verCode: vercode,
						seller: that.seller
					},
					header: {
						'token': that.token
					},
					// 成功返回方法
					success: (res) => {
						this.verification = null
						this.verification = res.data.data
						if (this.verification != null) {
							this.coupon = this.verification.coupon
							//判断优惠券类型
							switch (this.coupon.couponType) {
								case 'discount':
									this.getDiscount(this.coupon.discount);
									break;
								case 'full_reduce':
									this.getReduction(this.verification.prePrice, this.coupon.triggerMoney,
										this.coupon.preferentialMoney);
									break;
								case 'other':
									this.getNewCustomer(this.coupon.preferentialMoney);
									break;
							};

							//将服务内容分割
							let msg = '';
							msg = this.verification.serviceIntroduction
							// console.log(msg);
							this.serviceContent = msg.split(/[;；,、 ]/);
						}


					}
				})
			},
			//计算折扣
			getDiscount(discount) {
				let price = this.verification.prePrice;
				price = price * discount * 0.01
				this.verification.payPrice = price;
			},
			//计算满减
			getReduction(price, beforePrice, afterPrice) {
				if (price >= beforePrice) {
					price -= afterPrice;
					this.verification.payPrice = price;
				}
			},
			//新客优惠券
			getNewCustomer(discount) {
				let price = this.verification.prePrice;
				price = price - discount;
				this.verification.payPrice = price;
			}
		},
		//页面加载时请求
		onLoad: function(option) {
			let that = this
			let c = option.code
			this.code = c
			this.verification.verCode = c;

			// console.log(this.verification);

			//向后端传递token并获取商家详细信息
			uni.request({
				url: "http://localhost:8080/carShop/getInfo",
				method: "GET",
				success(res) {
					console.log(that.verification);
					// console.log(res);
					// console.log(res.data.data.merchantId);
					if (res.data.data != null) {
						that.seller = res.data.data.merchantId
					}
					// let shop = res.data.data;
					// console.log(shop.merchantName);
					// that.shopName = shop.merchantName;
					// that.img = shop.merchantImgs.img;
				},
				fail: (res) => {
					console.log("获取商户信息失败");
				}
			})

			//查询核销码相关信息
			this.getDetails(c);

			// 获取token
			uni.getStorage({
				key: 'token',
				success: function(res) {
					that.token = res.data;
				}
			});
		}

	};
</script>
<style lang="scss">
	.container {
		position: relative;

		.top {
			width: 720rpx;
			// height: 160rpx;
			padding: 10rpx;
			background-color: white;
			position: absolute;
			border-radius: 30rpx;
			left: 15rpx;
			top: 100rpx;
			display: flex;

			justify-content: space-evenly;
			align-items: center;

			.input1 {
				color: #2E80F9;
				font-size: 28rpx;
			}
		}

		.input {
			border: solid 2rpx gainsboro;
			border-radius: 15rpx;
			padding-left: 20rpx;
			width: 380rpx;
			height: 80rpx;
		}

		;

		.button {
			background-color: #2E80F9;
			font-size: 28rpx;
			line-height: 80rpx;
			height: 80rpx;
			margin-left: 15rpx;
			color: white;
		}

		.bottom {
			width: 720rpx;
			// height: 900rpx;
			padding-bottom: 30rpx;
			background-color: white;
			position: absolute;
			top: 300rpx;
			left: 15rpx;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			.bottom1 {
				display: flex; // 启用Flexbox  
				align-items: center; // 垂直居中  
				justify-content: center; // 如果需要水平居中也可以添加这个，但在这个例子中可能不是必需的  
				width: 680rpx;
				height: 100rpx;
				border-bottom: 1rpx solid gray;
				font-size: 18px;
				font-weight: 600;
			}

			.bottom2 {
				width: 680rpx;
				// height: 350rpx;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid gray;
				margin-top: 40rpx;
				display: flex;
				flex-direction: column;

			}

			.bottom3 {
				width: 680rpx;
				// height: 350rpx;
				margin-top: 60rpx;
				display: flex;
				flex-direction: column;

			}


		}

		.status {
			// position: fixed;
			background-color: #2E80F9;
			color: white;
			width: 500rpx;
			height: 80rpx;
			// top: 1220rpx;
			bottom: 50rpx;
			// margin-top: 30rpx;
			left: 130rpx;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 35rpx;
		}

		.status2 {
			position: fixed;
			background-color: #808080;
			color: white;
			width: 500rpx;
			height: 80rpx;
			left: 130rpx;
			bottom: 50rpx;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 35rpx;
		}

	}

	.title {
		font-size: 40rpx;
		font-weight: 600;
		// margin-top: -22rpx;
		margin-bottom: 20rpx;

	}

	.zw {
		margin-top: 9rpx;
		display: flex;

	}

	.zws {
		margin-top: 9rpx;
		font-weight: 600;
		display: flex;
	}



	.custom-dialog {
		/* 添加的对话框样式 */
		width: 70%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px;
		border-radius: 10px;
		background-color: #fff;

		/* 其他样式... */
		.button-confirm {
			display: flex;


		}
	}

	.custom-dialog text {
		/* 文本样式 */
		margin-bottom: 10px;
		font-size: 35rpx;
		font-weight: 500;
		text-align: center;
	}

	.button-confirm1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 60rpx;
		border-radius: 30rpx;
		margin-right: 30rpx;
		margin-top: 20rpx;

	}

	.button-confirm2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 60rpx;
		border-radius: 30rpx;
		margin-right: 30rpx;
		margin-top: 20rpx;
		color: white;
		background-color: #2E80F9;
	}

	.null {
		background-color: white;
		width: 720rpx;
		height: 400rpx;
		margin: -40rpx auto;
		border-radius: 20rpx;

		.bottom1 {
			display: flex; // 启用Flexbox  
			align-items: center; // 垂直居中  
			justify-content: center; // 如果需要水平居中也可以添加这个，但在这个例子中可能不是必需的  
			width: 680rpx;
			height: 100rpx;
			border-bottom: 1rpx solid gray;
			font-size: 18px;
			font-weight: 600;
		}
	}
</style>